<script setup>
const props = defineProps({
  isShowQueryParams: Boolean,
  isShowLoadMore: Boolean,
  isLoadMoreQueryParams: Boolean,
})
const emits = defineEmits(['handleQuery', 'resetQuery', 'setLoadMoreQueryParams'])
const isLoadMoreQueryParams = ref(props.isLoadMoreQueryParams)
const loadMoreButtonIconRef = ref('Plus')
const loadMoreButtonText = ref('加载更多')
const handleLoadMoreQuery = () => {
  isLoadMoreQueryParams.value = !isLoadMoreQueryParams.value
  loadMoreButtonText.value = isLoadMoreQueryParams.value ? '收起更多' : '加载更多'
  loadMoreButtonIconRef.value = isLoadMoreQueryParams.value ? 'Minus' : 'Plus'
  emits('setLoadMoreQueryParams', isLoadMoreQueryParams.value)
}

const handleQuery = () => {
  emits('handleQuery')
}
const resetQuery = () => {
  emits('resetQuery')
}

</script>

<template>
  <el-col :span="1.5" v-show="isShowQueryParams" >
    <el-button ref="loadMoreButtonRef" type="primary"
               :icon="loadMoreButtonIconRef" @click="handleLoadMoreQuery">
      <template #default>
        {{loadMoreButtonText}}
      </template>
    </el-button>
  </el-col>
  <el-col :span="1.5" v-show="isShowQueryParams" >
    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  </el-col>
  <el-col :span="1.5" v-show="isShowQueryParams">
    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  </el-col>
</template>